<template>
  <div>
    <!-- 配镜试戴 -->
    <div v-if="glassesMeasureStatus == 1" class="main_box">
      <div
        class="optomertrist"
        :style="{
          'margin-top': marginTop + 'vh',
        }"
      >
        <el-card class="item">
          <template #header>
            <div class="title">
              <svg
                t="1752730893335"
                class="w-[0.8rem] h-[0.8rem]"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6229"
                width="128"
                height="128"
              >
                <path
                  d="M727.137051 421.398925a217.179701 217.179701 0 1 0-217.164418 217.026866 217.363104 217.363104 0 0 0 217.164418-217.026866z m-373.026388 0a155.892537 155.892537 0 1 1 155.892537 155.785553 155.999522 155.999522 0 0 1-155.892537-155.785553z m256.764179 0a100.871642 100.871642 0 1 0-100.871642 100.871642 101.009194 101.009194 0 0 0 100.886925-100.871642z m-140.608955 0a39.615045 39.615045 0 1 1 39.615044 39.584478 39.660896 39.660896 0 0 1-39.523343-39.584478z m152.025791 465.87415V796.274627A405.733254 405.733254 0 1 0 106.272096 406.084776a395.844776 395.844776 0 0 0 301.48394 391.565373v91.181851a8.803343 8.803343 0 0 1-1.253254-0.091701h-2.506507c-90.173134 15.283582-178.282985 43.22197-178.282985 103.714388a31.040955 31.040955 0 0 0 30.246209 31.484179 29.757134 29.757134 0 0 0 30.399044-29.848836c6.037015-14.748657 84.472358-51.765493 233.838806-51.765493s227.908776 37.07797 233.747105 50.435821a30.643582 30.643582 0 1 0 61.287164 0c0.061134-63.946507-97.448119-93.856478-192.848239-105.487283zM165.052752 406.084776a344.919881 344.919881 0 1 1 344.919881 344.751761A345.240836 345.240836 0 0 1 165.052752 406.084776z m396.012896 476.022448a743.699104 743.699104 0 0 0-38.331224-1.039284c-17.19403 0-38.31594 0.580776-53.645373 1.895164v-70.824119h91.976597v69.968239z"
                  fill="#1296db"
                  p-id="6230"
                ></path>
              </svg>
              <span>侧面--右</span>
            </div>
          </template>

          <template #default> <div class="video">视频影像</div> </template>
        </el-card>
        <el-card class="item">
          <template #header>
            <div class="title">
              <svg
                t="1752730893335"
                class="w-[0.8rem] h-[0.8rem]"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6229"
                width="128"
                height="128"
              >
                <path
                  d="M727.137051 421.398925a217.179701 217.179701 0 1 0-217.164418 217.026866 217.363104 217.363104 0 0 0 217.164418-217.026866z m-373.026388 0a155.892537 155.892537 0 1 1 155.892537 155.785553 155.999522 155.999522 0 0 1-155.892537-155.785553z m256.764179 0a100.871642 100.871642 0 1 0-100.871642 100.871642 101.009194 101.009194 0 0 0 100.886925-100.871642z m-140.608955 0a39.615045 39.615045 0 1 1 39.615044 39.584478 39.660896 39.660896 0 0 1-39.523343-39.584478z m152.025791 465.87415V796.274627A405.733254 405.733254 0 1 0 106.272096 406.084776a395.844776 395.844776 0 0 0 301.48394 391.565373v91.181851a8.803343 8.803343 0 0 1-1.253254-0.091701h-2.506507c-90.173134 15.283582-178.282985 43.22197-178.282985 103.714388a31.040955 31.040955 0 0 0 30.246209 31.484179 29.757134 29.757134 0 0 0 30.399044-29.848836c6.037015-14.748657 84.472358-51.765493 233.838806-51.765493s227.908776 37.07797 233.747105 50.435821a30.643582 30.643582 0 1 0 61.287164 0c0.061134-63.946507-97.448119-93.856478-192.848239-105.487283zM165.052752 406.084776a344.919881 344.919881 0 1 1 344.919881 344.751761A345.240836 345.240836 0 0 1 165.052752 406.084776z m396.012896 476.022448a743.699104 743.699104 0 0 0-38.331224-1.039284c-17.19403 0-38.31594 0.580776-53.645373 1.895164v-70.824119h91.976597v69.968239z"
                  fill="#1296db"
                  p-id="6230"
                ></path>
              </svg>
              <span>正面</span>
            </div>
          </template>
          <template #default>
            <!-- <div class="video">视频影像</div>  -->
            <VideoImage
            ref="videoCanvas"
            class="w-full"
            style="height: calc(100vh - 14rem)"
            @handleInitJudge="handleInitJudge"
          />
          </template>
        </el-card>
        <el-card class="item">
          <template #header>
            <div class="title">
              <svg
                t="1752730893335"
                class="w-[0.8rem] h-[0.8rem]"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6229"
                width="128"
                height="128"
              >
                <path
                  d="M727.137051 421.398925a217.179701 217.179701 0 1 0-217.164418 217.026866 217.363104 217.363104 0 0 0 217.164418-217.026866z m-373.026388 0a155.892537 155.892537 0 1 1 155.892537 155.785553 155.999522 155.999522 0 0 1-155.892537-155.785553z m256.764179 0a100.871642 100.871642 0 1 0-100.871642 100.871642 101.009194 101.009194 0 0 0 100.886925-100.871642z m-140.608955 0a39.615045 39.615045 0 1 1 39.615044 39.584478 39.660896 39.660896 0 0 1-39.523343-39.584478z m152.025791 465.87415V796.274627A405.733254 405.733254 0 1 0 106.272096 406.084776a395.844776 395.844776 0 0 0 301.48394 391.565373v91.181851a8.803343 8.803343 0 0 1-1.253254-0.091701h-2.506507c-90.173134 15.283582-178.282985 43.22197-178.282985 103.714388a31.040955 31.040955 0 0 0 30.246209 31.484179 29.757134 29.757134 0 0 0 30.399044-29.848836c6.037015-14.748657 84.472358-51.765493 233.838806-51.765493s227.908776 37.07797 233.747105 50.435821a30.643582 30.643582 0 1 0 61.287164 0c0.061134-63.946507-97.448119-93.856478-192.848239-105.487283zM165.052752 406.084776a344.919881 344.919881 0 1 1 344.919881 344.751761A345.240836 345.240836 0 0 1 165.052752 406.084776z m396.012896 476.022448a743.699104 743.699104 0 0 0-38.331224-1.039284c-17.19403 0-38.31594 0.580776-53.645373 1.895164v-70.824119h91.976597v69.968239z"
                  fill="#1296db"
                  p-id="6230"
                ></path>
              </svg>
              <span>侧面--左</span>
            </div>
          </template>

          <template #default> <div class="video">视频影像</div> </template>
        </el-card>

        <!-- <el-card class="item flex flex-col justify-between">
        <el-alert
          :closable="false"
          :type="is_distance == 1 ? 'success' : 'warning'"
          show-icon
          class="mb-1"
        >
          {{
            is_distance == 1
              ? "距离正确"
              : is_distance
              ? "  距离过近"
              : " 距离过远"
          }}
        </el-alert>
        <el-alert
          :closable="false"
          :type="is_pupil == 1 ? 'success' : 'warning'"
          show-icon
          class="mb-1"
        >
          {{ is_pupil == 1 ? "瞳孔正常" : "瞳孔过小" }}
        </el-alert>
        <el-alert
          :closable="false"
          type="success"
          show-icon
          class="mb-1"
          v-if="is_distance == 1 && is_pupil == 1"
        >
          开始测量，请保持不要乱动
        </el-alert>

        <template #footer>
          <div class="w-full flex justify-end">
            <el-button type="primary" @click="startMeasure(1)"
              >开始测量</el-button
            >
          </div>
        </template>
      </el-card> -->
      </div>
      <el-card class="tips">
        <template #header> 提示 </template>
        <template #default>
          <div class="flex justify-between">
            <el-alert
              :closable="false"
              :type="is_distance == 1 ? 'success' : 'warning'"
              show-icon
              class="w-[49%] mb-1"
            >
              {{
                is_distance == 1
                  ? "距离正确"
                  : is_distance==2
                  ? "  距离过近"
                  : " 距离过远"
              }}
            </el-alert>
            <el-alert
              :closable="false"
              :type="is_pupil == 1 ? 'success' : 'warning'"
              show-icon
              class="w-[49%] mb-1"
            >
              {{ is_pupil == 1 ? "瞳孔正常" : "瞳孔过小" }} 
            </el-alert>
          </div>
          <el-alert
            :closable="false"
            type="success"
            show-icon
            class="mb-1"
            v-if="is_distance == 1 && is_pupil == 1"
          >
            开始测量，请保持不要乱动
          </el-alert>
        </template>
      </el-card>
    </div>

    <MeasureSuccess v-else />
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect, onBeforeUnmount } from "vue";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";

import MeasureSuccess from "./component/MeasureSuccess.vue";
import VideoImage from "./component/VideoImage.vue";

onMounted(() => {
  marginTop.value = 70 / 50;
});

const useStore = useUserStore();
const { glassesMeasureStatus } = storeToRefs(useStore);

const videoCanvas = ref(null);
// 开始测量
const startMeasure = (type) => {
  const title =
    type == 1 ? "结果生成中，请稍候..." : "正在重新生成结果，请稍后...";
  // const loading = ElLoading.service({
  //   lock: true,
  //   text: title,
  //   background: "rgba(0, 0, 0, 0.7)",
  // });

  videoCanvas.value?.capturePicture();
  setTimeout(() => {
    // loading.close();
    videoCanvas.value?.stopCamera(); // 停止摄像头
    useStore.updateGlassesMeasureStatus(2);
  }, 3000);
};

const handleInitJudge = () => {
  fn_distance();
};

// 1.判断距离
const is_distance = ref(0); // 1:正常距离 2:距离过短 3:距离过长
// 2.判断是否捕捉瞳孔
const is_pupil = ref(0); // 1:正常 2:异常

let distance_timer = ref(null);
const fn_distance = () => {
  distance_timer.value = setInterval(() => {
    is_distance.value = getRandomInt(2, 3);
  }, getRandomInt(1, 3));

  setTimeout(() => {
    is_distance.value = 1;
    clearInterval(distance_timer.value);
    fn_pupil();
  }, getRandomInt(2, 5) * 1000);
};

let pupil_timer = ref(null);
const fn_pupil = () => {
  pupil_timer.value = setInterval(() => {
    is_pupil.value = getRandomInt(2, 3);
  }, getRandomInt(1, 3) * 1000);

  setTimeout(() => {
    is_pupil.value = 1;
    clearInterval(pupil_timer.value);
    startMeasure(1);
  }, 5000);
};

watchEffect(() => {
  if (glassesMeasureStatus == 1) {
    console.log(121);
    is_distance.value = 0;
    is_pupil.value = 0;
  }
});

// 根据屏幕尺寸，动态控制上边距
const marginTop = ref(7);
window.addEventListener("resize", () => {
  marginTop.value = 70 / 50;
});

/**
 * 生成指定范围内的随机整数
 * @param {number} min - 最小值（包含）
 * @param {number} max - 最大值（包含）
 * @returns {number} 随机整数
 */
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

onBeforeUnmount(() => {
  videoCanvas.value?.stopCamera(1);
});
</script>

<style scoped lang="scss">
.main_box {
  @apply w-[99%] mx-auto;
}
.optomertrist {
  height: calc(100vh - 16rem) !important;
  @apply w-[100%] flex justify-between items-center;
  .item {
    @apply w-[33%] h-full;

    .title {
      @apply flex justify-center items-center;
      span {
        @apply ml-1;
      }
    }
  }

  // .gt,
  // .lt {
  //   @apply w-full h-[49.5%];
  //   .video {
  //     // background-color: pink;
  //     height: calc(100vh - 34rem);
  //     @apply w-full flex justify-center items-center;
  //   }
  // }
  .item :deep(.el-card__header) {
    @apply py-[0.7rem];
  }
  .item :deep(.el-card__footer) {
    @apply py-[0.5rem] px-[0.5rem];
  }
}

.video {
  height: calc(100vh - 21rem);
  @apply w-full flex justify-center items-center;
}

.tips {
  height: 7.5rem !important;
  @apply w-full mt-[0.2rem];
}
.tips :deep(.el-card__header) {
  @apply py-[0.5rem] px-[0.5rem];
}
</style>